<template>
    <div id="head">
        <div class="flex justify-between align-center">
            <section id="Logo" class="logoBlock">
                <img class="pointer" :src="require('@/assets/images/logo.svg')" alt="" @click="goto(0,'')">
            </section>
            <section id="standardTheme" class="flex-1">
                <ul class="standardList flex align-center justify-center">
                    <li class="standardItem" :class="{'active':activeType==0}" @click="goto(0,'')">品牌规范</li>
                    <li class="standardItem" :class="{'active':activeType==1}" @click="goto(1,'exper')">体验规范</li>
                    <li class="standardItem" :class="{'active':activeType==2}" @click="goto(2,'auth')">IP授权</li>
                </ul>
            </section>
            <section id="Mine" class=" flex align-center">
                <div class="searchStandard">
                    <el-input class="StandardIpt" v-model="keyword" placeholder="搜索规范…" @keyup.enter.native="searchStand()" prefix-icon="el-icon-search"></el-input>
                </div>
                <div class="flex">
                    <!--<div>
                        <el-select v-model="role_id" @change="changeRole()" placeholder="请选择">
                            <el-option
                            label="超级管理员"
                            value="1">
                            </el-option>
                            <el-option
                            label="普通用户"
                            value="3">
                            </el-option>
                        </el-select>
                    </div>-->

                    <article>
                        <div class="avatarBox" @click.stop="menuFlag=true">
                            <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
                        </div>
                        <ul id="menuData" v-show="menuFlag">
                            <li @click="goAdmin('/myStand');">我的规范</li>
                            <li @click="goAdmin('/authManage');" v-if='$store.state.userInfo.role_id!="3"'>IP授权管理中心</li>
                            <li @click="$store.commit('SET_ADMIN_ACTIVE_MENU',101);goAdmin('/admin/brandMan');"  v-if='$store.state.userInfo.role_id!="3"'>后台管理中心</li>
                        </ul>
                    </article>
                    <!--<el-dropdown trigger="click">
                        <span class="el-dropdown-link pointer">
                            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                        </span>
                        <div>
                            <el-dropdown-menu slot="dropdown" id="menuHead" style="padding:0;width:160px;border:none;border-radius:15px;box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);">
                                <el-dropdown-item class="clearfix">
                                    <div @click="goAdmin('/myStand');">我的规范</div>
                                </el-dropdown-item>
                                <el-dropdown-item class="clearfix" v-if='$store.state.userInfo.role_id!="3"'>
                                    <div @click="goAdmin('/authManage');">IP授权管理中心</div>
                                </el-dropdown-item>
                                <el-dropdown-item class="clearfix" v-if='$store.state.userInfo.role_id!="3"'>
                                    <div @click="$store.commit('SET_ADMIN_ACTIVE_MENU',101);goAdmin('/admin/brandMan');">后台管理中心</div>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </div>
                        
                    </el-dropdown>-->
                </div>
            </section>
        </div>
    </div>
</template>
<script>
export default {
    name:'hd',
    data(){
        return{
			standardIndex:0,
            keyword:'',
            activeType:'',
            role_id:'',
            menuFlag:false
        }
    },
    mounted(){
        this.activeType = this.$store.state.activeType;
        this.role_id = this.$store.state.userInfo.role_id;
        let that = this;
        document.onclick = function(){
            that.menuFlag = false;
        }
    },
    methods:{
        changeRole(){
            this.$store.commit('SET_ROLEID',this.role_id)
        },
        searchStand(){
            if(this.keyword){
                this.$store.commit('SET_ACTIVETYPE',-1);
                this.activeType = -1;
                this.$router.push({path:'/resultStand',query:{'keyword':this.keyword}})
            }
        },
        goto(type,path){
            this.activeType = type;
            this.$store.commit('SET_ACTIVETYPE',type)
            this.$router.push('/'+path);
        },
        goAdmin(path){
            this.activeType = -1;
            this.$store.commit('SET_ACTIVETYPE',-1)
            this.$router.push(path);
        }
    }
}
</script>
<style scoped lang='less'>




#head{
    height: 80px;
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.05);
    padding: 0 80px;
    >div{
        height:100%;
        min-width: 1200px;
        max-width: 1750px;
        margin:0 auto;
    }
    #Logo,#Mine{
        min-width: 360px;
    }
    .standardList{
        min-width: 570px;
    }
}
.standardItem{
    margin: 0 50px;
    line-height: 40px;
    font-size: 24px;
    cursor: pointer;
    color: #95A5B6;
}
.standardItem.active{
    color: #0064FF;
    border-bottom: 2px solid #0064FF;
    font-weight: 500;
}
.searchStandard{
    margin-right: 20px;
}
/deep/ .StandardIpt .el-input__inner{
    width: 300px;
    border-radius: 40px;
    border: none;
    background: #F4F5F8;
    border-radius: 20px;
    color: #95A5B6;
    height: 40px;
}
/deep/.searchStandard .el-input__inner{
    width: 300px;
    border-radius: 40px;
}

/deep/ .el-dropdown-menu__item:focus,/deep/ .el-dropdown-menu__item:not(.is-disabled):hover{
    background-color: #F4F5F8;
    color: #000;
}

#Mine{
    #menuHead{
        width: 160px !important;
        padding: 0 !important;
        border: none;
        border-radius: 15px;
        box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
        overflow: hidden;
        cursor: pointer;
        background: #fff;
        top: 67px !important;
        left: 1740px !important;
    }
    article{
        position:relative;
        .avatarBox{
            width:40px;
            height:40px;
            border-radius: 50%;
            overflow:hidden;
            img{
                max-width: 100%;
            }
        }
        #menuData{
            padding: 0px;
            width: 160px;
            border: none;
            border-radius: 15px;
            box-shadow: #0000001a 0px 0px 10px 0px;
            position: absolute;
            top: 61px;
            background-color: #fff;
            transform-origin: center top;
            right: 0;
            transform: translateX(50%);
            overflow:hidden;
            margin-right: 20px;
            li{
                height: 39px;
                font-weight: 400;
                font-size: 16px;
                text-align: center;
                line-height: 39px;
                padding: 0;
                cursor:pointer;
            }
            li:hover{
                background-color: #f4f5f8;
                color: #000;
            }
        }
    }
}
/deep/ .el-dropdown-menu__item{
    height: 39px;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    line-height: 39px;
    padding: 0;
}
/deep/ .popper__arrow{
    display: none;
}
</style>

